$success:#00EE00;
$danger:#D43932;
$info: #4466AA;
$warn: #FFA10D;
$primary: #666;
@keyframes toast-show {
  from { bottom: 0px; }
  to { bottom: 64px;}
}
.toast-box{
  position: fixed;
  bottom: 64px;
  left: 50%;
  transform: translate(-50%, 0);
  padding: 8px 12px;
  animation: toast-show 0.3s;
  display: inline-block;
  background: rgba(188, 188, 188, 0.3);
  color: #FFFFFF;
  z-index: 999;
}

@keyframes message-show {

}

.message-box {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  color: #FFFFFF;
  .message-info{
    background: $info;
  }
  .message-warning {
    background: $warn;
  }
  .message-danger {
    background: $danger;
  }
  .message-primary {
    background: $primary;
  }
  .message-success {
    background: $success;
  }
}
